﻿
<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <title> 注  册 </title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="/css/login2.css" rel='stylesheet' type='text/css' />
    <script src="/js/jquery.min.js"></script>
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<style>
    .fa-lg {
        font-size: 2rem;
        line-height: 4.5rem;
        vertical-align: -15%;
        color: #fff;
    }

</style>
<body>
<div class="count">
    <div class="demo">
        <div class="login">
            <div style="width: 40%;float:left;padding: 9% 2%;height:90%">
                <div style="text-align: center;height:25%">
                    <img src="/img/logo.jpg" style="width:45%;height: auto">
                </div>
                <div style="text-align: center;height:20%;margin-top:10%">
                    <span style="font-size: 2.8rem;color:#fff">欢迎来到娱论君</span>
                </div>
                <div style="text-align: center;height:10%;margin-top:10%">
                    <span style="font-size: 1.8rem;color:#fff">WELCOME TO YULUNJUN</span>
                </div>
            </div>
            <div style="width: 60%;float:left;padding: 8% 0% 5% 10%;height:100%">
                <form method="post" action="/sites/registered">
                    <div style="text-align: center;width:85%;height: 60%">
                     <div style="width:100%;float:left;padding-bottom: 5%">
                            <span style="font-size: 2.8rem;color:#fff">账号注册</span>
                        </div>
                        <div style="width:100%;float:left;background-color:#fff;height:4.5rem;">
                            <div style="width: 20%;float: left;height:4.5rem; background-color: #C1C5C8;">
                                <img src="/img/person.png" style="width: 80%;height:4.5rem">
                            </div>
                            <div style="width: 80%;float:left;color:#fff;height:4.5rem">
                                <input type="text" name="userName" placeholder="请输入用户名" required="required" style="BACKGROUND-COLOR: transparent;">
                            </div>
                        </div>

                        <div style="width: 100%;float:left;padding-top:5%">
                            <div style="width:100%;float:left;background-color:#fff;height:4.5rem;">
                                <div style="width: 20%;float: left;height:4.5rem; background-color: #C1C5C8;">
                                  <i class="fa fa-phone fa-lg"></i>
                                </div>
                                <div style="width: 80%;float:left;color:#fff;height:4.5rem">
                                    <input type="text" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')"  name="phoneNum" placeholder="请输入手机号" required="required"  maxlength="11" style="BACKGROUND-COLOR: transparent;">
                                </div>
                            </div>
                        </div>


                        <div style="width:100%;float:left;padding-top:5%">
                            <div style="width:59%;float:left">
                                <input type="text" name="verifyInput" style="width:95%;margin-left: -5%;"placeholder="请输入验证码">
                            </div>
                            <div style="width:40%;float:left;margin-top:1%">
                                <img class="verifyCode" onclick="changeCode()" src="getVerifyCode" width="100%"></span>
                            </div>
                        </div>
                        <div style="width:100%;float:left;background-color:#fff;height:4.5rem">
                            <div style="width: 20%;float: left;height:4.5rem;background-color: #C1C5C8;">
                                <img src="/img/lock.png" style="width: 80%;height:4.5rem">
                            </div>
                            <div style="width: 60%;float:left" id="pwd">
                                <input type="password" name="encrypt" id ="encrypt" placeholder="请输入密码" required="required"  style="BACKGROUND-COLOR: transparent;">
                            </div>
                            <div style="width: 20%;float: left;height:4.5rem;" onclick="changeP()">
                                <img src="/img/eyes.png" style="width: 100%;height:4.5rem">
                            </div>
                        </div>

                        <div style="text-align: center;float:left;width: 100%;padding-bottom: 5%">
                            <th:block th:if="${registeredDto != null && registeredDto.code!=200}">
                                <span th:text="${registeredDto.message}" style="color: red;"></span>
                            </th:block>
                    </div>

                    <div class="sign" style="height: 10%;width:100%;">
                        <input type="submit" value="注册账号" class="submit"/>
                    </div>
                        <div style="text-align: center;color: #99999b;padding-top: 4%;font-size:1.3rem" id="toLogin">. —已有账号，去登陆</div>
                        <div style="text-align: center;color: #fff;padding-top: 4%;font-size:1.3rem">登陆娱论君表示你同意《娱论君服务协议》</div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
    /*点击刷新验证码*/
    function changeCode(){
        var src = "/sites/getVerifyCode?"+new Date().getTime(); //加时间戳，防止浏览器利用缓存
        $('.verifyCode').attr("src",src);                  //jQuery写法
    }

    $('#toLogin').click(function () {
        window.location.href = '/sites/login';
    })

    function changeP() {
        var browserName = navigator.appName;
        var type ="password";
        if( document.getElementById('encrypt').type=="password"){
            type="text";
        }else{
            type ="password";
        }
        if (browserName == "Netscape") {
            document.getElementById('encrypt').type = type;
        } else if (browserName == "Microsoft Internet Explorer") {
            $('pwd').replace('<input name="encrypt" type=type class="input" id="encrypt" autocomplete="off"/>');
        }
    }
</script>


</body>
</html>